<!DOCTYPE HTML>
<html lang="en">
<head>
	<meta charset='UTF-8' />
	<meta name='generator' content='ecos.b2c' />
	<title>三鑫-灯世界网销平台</title>
	<meta name='keywords' content='' />
	<meta name='description' content='' />
	<meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no'/>
	<link href="__PUBLIC__/phone/css/zhuce_style.css" rel="stylesheet"/>
	<link rel="stylesheet" type="text/css" href="__PUBLIC__/phone/css/tui.css"/>
	<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
	<script src="__PUBLIC__/layer/layer.js"></script>
	<script src="__PUBLIC__/hytn/js/jquery.form.min.js" type="text/javascript"></script>
	<script src="__PUBLIC__/dist/lrz.bundle.js"></script>
	<script src="__PUBLIC__/dist/zepto.min.js"></script>
	<style>
		.header6{
			margin-top: 10px;background: #fff;padding: 10px;
		}
		.blah{width:80px;height:80px;float:none;margin-right:0px;display: none;}
		.loading{display: none;position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; background-color: #333; z-index:1002; -moz-opacity: 0.6; opacity:.60; filter: alpha(opacity=60);}
		.loading img{position: absolute !important;    top: 0;    right: 0;    bottom: 0;    left: 0;    margin: auto; }
	</style>

</head>
<body style="background-color: #F7F7F8;">
<header style="background-image: linear-gradient(#00a1f2,#00a1f2);">
	<div class="a-bar">
		<a href="javascript:history.back()" class="a-back"><i class="arr left"></i></a>
		<div class="a-name" style="color: #fff;">电工注册</div>
	</div>
</header>
<div class="loading"><img src="__PUBLIC__/phone/img/loadingpn.gif" alt="正在加载..."></div>
<!--enctype="multipart/form-data" 带图片-->
<form action="{:U('electrician')}" method="post" align="center" class="ajax-form" onsubmit="return showMask()">
	<div class="header2">
		<p><span>姓名：</span><input type="text" name="real_name" required style="height:21px;"/></p>
	</div>
	<div class="header6">
		<p><span>地址：</span>
			<select name="province" id="province" required style="width: 20%;">
				<option>请选择</option>
				<volist name="province" id="pro">
					<option value="{$pro.code}">{$pro.name}</option>
				</volist>
			</select>
			<select name="city" id="city" required style="width: 20%;"></select>
			<select name="county" id="county" required style="width: 20%;"></select>
			<select name="town" id="town" required style="width: 20%;"></select>
		</p>
	</div>
	<div class="header3">
		<p><span>身份证号：</span><input type="text" name="id_number" required/></p>
	</div>
	<div class="header4">
		<div class="form1">
			<img src="" alt="" class="blah"/>
			<div class="blahasd">
				<input type='file' class="imgInp" name="identity_card_front" required/>
				<p style="position: absolute;bottom: 8px;color:#bfbfbf;line-height: 14px;">上传身份证<br />正面图片</p>
			</div>
		</div>

		<div class="form1">
			<img src="" alt="" class="blah"/>
			<div class="blahasd">
				<input type='file' class="imgInp" name="identity_card_reverse" required/>
				<p style="position: absolute;bottom: 8px;color:#bfbfbf;line-height: 14px;">上传身份证<br />反面图片</p>
			</div>
		</div>
		<div style="clear: both;"></div>
		<div class="form1">
			<img src="" alt="" class="blah"/>
			<div class="blahasd">
				<input type='file' class="imgInp" name="electrician_license_front" required/>
				<p style="position: absolute;bottom: 8px;color:#bfbfbf;line-height: 14px;">上传电工证<br />正面图片</p>
			</div>
		</div>

		<div class="form1">
			<img src="" alt="" class="blah"/>
			<div class="blahasd">
				<input type='file' class="imgInp" name="electrician_license_reverse" required/>
				<p style="position: absolute;bottom: 8px;color:#bfbfbf;line-height: 14px;">上传电工证<br />反面图片</p>
			</div>
		</div>
		<div style="clear: both;"></div>
	</div>
	<if condition="$shenhe eq 1">
		<buttom class="header5" style="background:#9d9d9d;position: relative;top: 27px;padding: 10px 20%">申请成为电工</buttom>
		<else/>
		<button type="submit" class="header5" >申请成为电工</button>
	</if>
	<input type="hidden" name="identityCardFront" id="identityCardFront" value="" />
	<input type="hidden" name="identityCardReverse" id="identityCardReverse" value="" />
	<input type="hidden" name="electricianLicenseFront" id="electricianLicenseFront" value="" />
	<input type="hidden" name="electricianLicenseReverse" id="electricianLicenseReverse" value="" />
</form>


<!--表单提交等待遮罩层-->
<script>
	/**
	 * 表单提交
	 */
	$(function () {
		$('.ajax-form').ajaxForm({
			success: complete, // 这是提交后的方法
			dataType: 'json'
		});
	});
	function complete(data) {
		hideMask();
		if (data.status == 1) {
			layer.alert(data.info, {icon: 6}, function (index) {
				layer.close(index);
				window.location.href = data.url;
			});
		} else {
			layer.alert(data.info, {icon: 5}, function (index) {
				layer.close(index);
				window.location.href = data.url;
			});
		}
	}


	//打开遮罩层
	function showMask(){
		$(".loading").css("height",$(document).height());
		$(".loading").css("width","100%");
		$(".loading").show();
		$('body').css("overflow","hidden");
	}
	//关闭
	function hideMask(){
		$(".loading").hide();
		$('body').css("overflow","auto");
	}
</script>



<script>
	function readURL(input,$this) {

		if (input.files && input.files[0]) {

			var reader = new FileReader();

			reader.onload = function (e) {
//			$('#form1').prepend($('<img id="blah" src='+e.target.result+' style="width:100px;height:100px;float:left;margin-right:10px"/>'))
				$this.parent().prev().attr('src', e.target.result).show();
				$this.parent().hide()
			}
			reader.readAsDataURL(input.files[0]);

		}
	}

	$(".imgInp").change(function(){

		readURL(this,$(this));

	});
	$('.blah').click(function(){
		$(this).next().find('input').val("");
		$(this).hide()
		$(this).next().show()
	})
</script>

<!--地区联动-->
<script>
	$('#province').change(function () {
		var province = $('#province').val();
		$.ajax({
			url:"{:U('area')}",
			type:'post',
			data:{'pid':province},
			success:function (e) {
				var data = JSON.parse(e);
				var area = '<option>请选择</option>';
				for(var i=0;i<data.length;i++){
					area +='<option value="'+data[i].code+'">'+data[i].name+'</option>';
				}
				$('#city').html(area);
			}
		})
	})
	$('#city').change(function () {
		var city = $('#city').val();
		$.ajax({
			url:"{:U('area')}",
			type:'post',
			data:{'pid':city},
			success:function (e) {
				var data = JSON.parse(e);
				var area = '<option>请选择</option>';
				for(var i=0;i<data.length;i++){
					area +='<option value="'+data[i].code+'">'+data[i].name+'</option>';
				}
				$('#county').html(area);
			}
		})
	})
	$('#county').change(function () {
		var county = $('#county').val();
		$.ajax({
			url:"{:U('area')}",
			type:'post',
			data:{'pid':county},
			success:function (e) {
				var data = JSON.parse(e);
				var area = '<option>请选择</option>';
				for(var i=0;i<data.length;i++){
					area +='<option value="'+data[i].code+'">'+data[i].name+'</option>';
				}
				$('#town').html(area);
			}
		})
	})
</script>
<script>
$(function(){
		$('.imgInp').on('change', function(){
			var $this = $(this);
			 lrz(this.files[0], {width: 640})
				.then(function (rst) {
					console.log(rst);
					if($this.attr('name') == 'identity_card_front'){
						$('#identityCardFront').val(rst.base64);
					}
					if($this.attr('name') == 'identity_card_reverse'){
						$('#identityCardReverse').val(rst.base64);
					}
					if($this.attr('name') == 'electrician_license_front'){
						$('#electricianLicenseFront').val(rst.base64);
					}
					if($this.attr('name') == 'electrician_license_reverse'){
						$('#electricianLicenseReverse').val(rst.base64);
					}
//					$.ajax({
//						url: '{:U('electrician')}',
//						type: 'post',
//						data: {$(this).attr('name'): rst.base64},
//						dataType: 'json',
//						timeout: 200000,
//						success: function (response) {
//							if (response.ecd == '0') {
//								alert('成功');
//								return true;
//							} else {
//								return alert(response.msg);
//							}
//						},
//
//						error: function (jqXHR, textStatus, errorThrown) {
//							
//							if (textStatus == 'timeout') {
//								a_info_alert('请求超时');
//
//								return false;
//							}
//
//							alert(jqXHR.responseText);
//						}
//					});
						
				})
				.catch(function (err) {

				})
				.always(function () {

				});
		});
	});	
</script>
</body>
</html>
